<template>
	<view class="rootContent">
		<!-- 顶部标题和搜索栏 -->
		<view class="title">
			<view class="shouye">首页</view>
			<image src="/static/img/IconSearch.png" class="search"  @click="toSearch"></image>
			
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.img" mode="heightFix"></image>
			</swiper-item>
		</swiper>
		<!-- 中间视频资料直播 -->
		<view class="content">
			<view class="sp">
				<image src="/static/img/video.png" class="img-center" mode="heightFix"></image>
				<view class="text">视频</view>
			</view>
			<view class="zl">
				<image src="/static/img/data.png" class="img-center" mode="heightFix"></image>
				<view class="text">资料</view>
			</view>
			<view class="zb">
				<image src="/static/img//live.png" class="img-center" mode="heightFix"></image>
				<view class="text">直播</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="classification">
			<view class="classification-title">
				<image src="/static/img/classification.png" class="class-img"></image>
				<view class="text1">分类</view>
			</view>
			
			<view class="content-class">
				
				<view class="column">
					<view v-for="(item,index) in classList" :key="index" v-if="index%2==0" class="class-item">
						<view class="row-item">
							<image :src="item.image" mode="heightFix" class="img-item"></image>
							<view class="title-item">{{item.title}}</view>
						</view>
						<view class="content-item">{{item.content}}</view>
					</view>
				</view>
				<view class="column">
					
					<view class="all">
						<view class="circle">
							<image src="/static/img/IconTheWhole.png" mode="heightFix" class="wholeimg"></image>
						</view>
						<view class="quanbu">全部</view>
					</view>
					
					<view v-for="(item,index) in classList" :key="index"  v-if="index%2!=0" class="class-item">
						<view class="row-item">
							<image :src="item.image" mode="heightFix" class="img-item"></image>
							<view class="title-item">{{item.title}}</view>
						</view>
						<view class="content-item">{{item.content}}</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '首页',
				// 轮播图
				swiperList:[
					{
						"img":"https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjAzNTV8MHwxfHNlYXJjaHw0MHx8ZWR1Y2F0aW9ufGVufDB8fHx8MTY4MDIzNzk4MA&ixlib=rb-4.0.3&q=80&w=1080"
					},
					{
						"img":"https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjAzNTV8MHwxfHNlYXJjaHw0MHx8ZWR1Y2F0aW9ufGVufDB8fHx8MTY4MDIzNzk4MA&ixlib=rb-4.0.3&q=80&w=1080"
					}
				],
				classList:[
					{
						"title":"Android",
						"content":"这是收录了相关的资料视频以及直播的合集，希望同学们认真学习，从入门到精通。",
						"image":"https://hjtblogpic.oss-cn-shanghai.aliyuncs.com/img/image-20230401153421395.png",
					},
					{
						"title":"PHP",
						"content":"这是收录了相关的资料视频以及直播的合集，希望同学们认真学习，从入门到精通。",
						"image":"https://hjtblogpic.oss-cn-shanghai.aliyuncs.com/img/image-20230401155344133.png",
					},
					{
						"title":"ios",
						"content":"这是收录了相关的资料视频以及直播的合集，希望同学们认真学习，从入门到精通。",
						"image":"https://hjtblogpic.oss-cn-shanghai.aliyuncs.com/img/image-20230401155439247.png",
					},
					{
						"title":"python",
						"content":"这是收录了相关的资料视频以及直播的合集，希望同学们认真学习，从入门到精通。",
						"image":"https://hjtblogpic.oss-cn-shanghai.aliyuncs.com/img/image-20230401155536935.png",
					},
					{
						"title":"java",
						"content":"这是收录了相关的资料视频以及直播的合集，希望同学们认真学习，从入门到精通。",
						"image":"https://hjtblogpic.oss-cn-shanghai.aliyuncs.com/img/image-20230401155623251.png",
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转search页面
			toSearch(){
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		}
	}
</script>

<style>
	.rootContent {
		/* 添加全局背景色 */
		position: absolute;
		width: 100%;
		height: 100%;
		background: #F7F8FC
	}
	.title{
		display: flex;
		height: 88rpx;
		width: 100%;
		justify-content:space-between;
		background-color: #FFFFFF;
	}
	.shouye{
		margin-top: 15rpx;
		margin-left: 30rpx;
		width: 100rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-weight: 700;
	}
	.search{
		margin-top: 15rpx;
		margin-right: 73rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.swiper{
		width: 690rpx;
		height: 371rpx;
		margin-left: 30rpx;
	}
	.content{
		display: flex;
		justify-content: space-between;
		width: 690rpx;
		height: 191rpx;
		background-color: #fff;
		margin-top: 34rpx;
		margin-left: 30rpx;
	}
	.sp{
		flex-direction:column;
		margin-top: 21rpx;
		margin-left: 48rpx;
	}
	.zl{
		flex-direction:column;
		margin-top: 21rpx;
		
	}
	.zb{
		flex-direction:column;
		margin-top: 26rpx;
		margin-right: 33rpx;
	}
	.img-center{
		width: 90rpx;
		height: 90rpx;
	}
	.text{
		width: 48rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 13rpx;
		margin-left: 22rpx;
	}
	
	.classification{
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.classification-title{
		display: flex;
		margin-top: 18rpx;
		margin-left: 32rpx;
	}
	.class-img{
		width: 50rpx;
		height: 50rpx;
	}
	.text1{
		margin-left: 5rpx;
		font-size: 34rpx;
		font-weight: 700;
	}
	.content-class{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin-top: 20rpx;
		margin-left: 32rpx;
		width: 624rpx;
	}
	.all{
		display: flex;
		flex-direction: column;
		width: 280rpx;
		height: 280rpx;
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		background: rgba(42, 130, 228, 0.36);
		border: 1rpx solid rgba(166, 166, 166, 1);    
	}
	.circle{
		border-radius: 50%;
		width: 118rpx;
		height: 118rpx;
		margin-top: 60rpx;
		margin-left: 78rpx;
		background: rgba(255, 255, 255, 1);
	}
	.wholeimg{
		margin-top: 14rpx;
		margin-left: 14rpx;
		height: 90rpx;
		width: 90rpx;
	}
	.quanbu{
		margin-top: 32rpx;
		margin-left: 109rpx;
		font-size: 30rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}
	.class-item{
		display: flex;
		flex-direction: column;
		width: 280rpx;
		border-radius: 16rpx;
		border: 1rpx solid rgba(166, 166, 166, 1);
		margin-bottom: 24rpx;
	} 
	.column{
		display: flex;
		flex-direction: column;
		/* width: calc(100%/2); */
	}
	.row-item{
		display: flex;
		flex-direction: row;
	}
	.img-item{
		width: 59rpx;
		height: 59rpx;
		margin: 28rpx 37rpx 29rpx 27rpx;
	}
	.title-item{
		margin-top: 35rpx;
		font-size: 30rpx;
		font-weight: 400;
	}
	.content-item{
		margin-left: 23rpx;
		margin-bottom: 50rpx;
		width: 250rpx;
	}
</style>
